<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/styles/bootstrap.css">
  <style>
    div.panel-primary {
      width: 600px;
      margin: 50px auto 0;
    }
  </style>
</head>
<body>
<div class="panel panel-primary">
  <div class="panel-heading">
    请登录
  </div>
  <div class="panel-body">
    <form id="form_login" class="form-horizontal">
      <div class="form-group has-feedback">
        <label class="col-sm-3 control-label" for="zh1">帐号：</label>
        <div class="col-sm-9 require">
          <input type="text" class="form-control" name="zh" id="zh1">
        </div>
      </div>
      <div class="form-group has-feedback">
        <label class="col-sm-3 control-label" for="pw1">密码：</label>
        <div class="col-sm-9 require">
          <input type="password" class="form-control" name="pwd" id="pw1">
        </div>
      </div>
      <div class="form-group has-feedback">
        <label class="col-sm-3 control-label" for="yzm">验证码：</label>
        <div class="col-sm-3 require">
          <input type="text" class="form-control" name="yzm" id="yzm">
        </div>
        <div class="col-sm-6">
          <span id="yzm1"></span>
          <a href="##" id="change_one">换一张</a>
        </div>
      </div>
      <div class="form-group has-feedback">
        <label class="col-sm-4 control-label col-sm-offset-8">
          <a data-toggle="modal" class="pull-left" href="#register">注册</a>
        </label>
      </div>
      <div class="form-group has-feedback">
        <label class="col-sm-6 control-label col-sm-offset-6">
          <button type="submit" class="btn btn-primary">登录</button>
          <button type="reset" class="btn btn-default">重置</button>
        </label>
      </div>
    </form>
  </div>
</div>
<div id="register" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">请注册</h4>
      </div>
      <form id="form_reg" class="form-horizontal">
        <div class="modal-body">
          <div class="form-group has-feedback">
            <label class="col-sm-3 control-label" for="zh">帐号：</label>
            <div class="col-sm-9 require">
              <input class="form-control" name="zh" id="zh">
            </div>
          </div>
          <div class="form-group has-feedback">
            <label class="col-sm-3 control-label" for="pwd2">密码：</label>
            <div class="col-sm-9 require">
              <input type="password" class="form-control" name="pwd" id="pwd2">
            </div>
          </div>
          <div class="form-group has-feedback">
            <label class="col-sm-3 control-label" for="pwd3">确认密码：</label>
            <div class="col-sm-9 require">
              <input type="password" class="form-control" name="repwd" id="pwd3">
            </div>
          </div>
          <div class="form-group has-feedback">
            <label class="col-sm-3 control-label" for="nc">昵称：</label>
            <div class="col-sm-9 require">
              <input type="text" class="form-control" name="nc" id="nc">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">注册</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        </div>
      </form>
    </div>
  </div>
</div>


<script src="/js/jquery-2.1.3.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
<script>
  $(function () {
    function generate_yzm() {
      $.get('/manage/manage_yzm', function (html) {
        $('#yzm1').html(html);
      })
    }
    generate_yzm();
    $('#change_one').click(function () {
      generate_yzm()
    })
      $('#form_login').submit(function (e) {
          e.preventDefault();
          $.post('/manage/manage_login', $(this).serialize(), function (flag) {
              console.log(flag)
              switch(flag){
                  case 1:
                      alert("登录成功");
                      location.href='/manage/manage'
                      break;
                  case 2:
                      alert("帐号或者密码有误");
                      break;
                  case 3:
                      alert("验证码有误");
                      break;
              }
          })
      });
      $('#form_reg').submit(function (e) {
          e.preventDefault();
          $.post('/manage/register', $(this).serialize(), function (flag) {
              switch(flag){
                  case 1:
                      alert("帐号注册成功");
                      window.location.href="/manage/manage";
                      break;
                  case 2:
                      alert("帐号已注册");
                      break;
                  case 3:
                      alert("两次密码不一致");
                      break;
              }
          },'json')
      });
  })
</script>
</body>
</html>
